<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="clickAddBtn" type="primary" icon="document">包裹入库</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input @keyup.enter.native="searchBtn" :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable autofocus>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select @keyup.enter.native="searchBtn" v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- 日期时间范围 -->
				<div class="riqi_wrap">
					<label class="label">时间：</label>
					<el-date-picker @change="timeChange" v-if="config.search.date" v-for="itemDate in config.search.date" v-model="data.exchanged.date[itemDate.name]" :type="itemDate.type" :range-separator="itemDate.separator" :size="itemDate.size" :start-placeholder="itemDate.placeholder+'开始'" :end-placeholder="itemDate.placeholder+'结束'" align="right" value-format="yyyy-MM-dd HH:mm" clearable placeholder="选择日期">
					</el-date-picker>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<el-table-column label="站点">
					<template slot-scope="scope">
						<span>{{ scope.row.siteName }}</span>
					</template>
				</el-table-column>
				<el-table-column label="快递单号">
					<template slot-scope="scope">
						<span style="display: block;border: 1px solid #999;padding: 1px 6px;border-radius: 6px;text-align: center;">
							{{ scope.row.expressCompanyName }}
						</span>
						<span @click="toDetail(scope.row)" style="display: block;color: #409eff;text-align: center;margin-top: 4px;cursor: pointer;">
							{{ scope.row.waybillNumber }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="包裹状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status==4" style="color: #333333;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status==3" style="color: #999999;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status==2" style="color: #5daf34;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status==1" style="color: #FF9900;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status!=4" style="color: #999;font-size: 12px;">( {{ scope.row.date }} )</span>
					</template>
				</el-table-column>
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status == 1" @click="signIn(scope.row)" type="primary" size="small">签收</el-button>
						<el-button v-if="scope.row.status == 1" @click="sendMessage(scope.row)" size="small">发送短信<span>({{scope.row.smsSendCount}})</span></el-button>
						<el-button v-if="scope.row.status == 1" @click="modify(scope.row)" size="small">修改</el-button>
						<el-button v-if="scope.row.status == 1" @click="returnPackage(scope.row)" size="small">退回</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center width="500px">
			<el-form ref="addForm" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select @keyup.enter.native="commitAdd('addForm')" v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框类型-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input @keyup.enter.native="commitAdd('addForm')" v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitAdd('addForm')" class="w-200">确认入库</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog :title="Edit.config.title" :visible.sync="Edit.dialogFormVisible" width="500px">
			<el-form ref="editForm" :model="Edit.data.form" :rules="Edit.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.select">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" clearable class="w-200">
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.multipleSelect">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" clearable class="w-200" multiple>
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.input">
					<el-input v-model.trim="Edit.data.form[item.prop]" :placeholder="item.placeholder" clearable class="h-40 w-200" :maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Edit.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitEdit('editForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 退回 -->
		<el-dialog title="退回" :visible.sync="return_package_show" center width="500px">
			<el-form ref="form" :model="return_form" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="return_form.label" :prop="return_form.prop">
					<el-select v-model="return_form.reason" :placeholder="return_form.placeholder" class="w-200">
						<el-option v-for="option in returnSelectData" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitReturn" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
		<audio ref="autoAudio" src="../../assets/mp3/chuku.mp3" style="display: none;">
		</audio>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import searchModel from 'components/Common/search-model.vue'
	import tableModel from 'components/Common/table-model.vue'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			searchModel,
			tableModel,
			pageModel,
		},
		data() {
			var phoneFormat = (rule, value, callback) => {
				if(!(/^1[34578]\d{9}$/.test(value))) {
					return callback(new Error('手机号格式不正确'));
				} else {
					callback();
				}
			};
			return {
				return_storckId: '',
				return_package_show: false,
				return_form: {
					prop: 'reason',
					label: '退回原因',
					reason: '',
					placeholder: '请选择原因'
				},
				returnSelectData: [{
						label: '拒收',
						value: '拒收'
					},
					{
						label: '面单脱落',
						value: '面单脱落'
					},
					{
						label: '退回',
						value: '退回'
					},
					{
						label: '错分',
						value: '错分'
					},
					{
						label: '手机号错误',
						value: '手机号错误'
					},
					{
						label: '其他',
						value: '其他'
					}
				],
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							siteId: '',
							expressCompanyId: '',
							waybillNumber: '', //数字5-30位
							pickCode: '', //数字1-6位
							clientMobile: '',
						},
						selectData: {
							siteId: [],
							expressCompanyId: [],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '录入包裹',
						form: {
							input: [{
									prop: 'waybillNumber',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickCode',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'clientMobile',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '站点',
								prop: 'siteId',
								placeholder: '请选择站点',
							}, {
								label: '快递公司',
								prop: 'expressCompanyId',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {
							waybillNumber: [{
								required: true,
								message: '请输入运单号'
							}, {
								min: 5,
								max: 30,
								message: '长度在 5 到 30 位数字',
								trigger: 'blur'
							}],
							pickCode: [{
								required: true,
								message: '请输入取件码'
							}, {
								min: 1,
								max: 6,
								message: '长度在 1 到 6 位数字',
								trigger: 'blur'
							}],
							clientMobile: [{
								required: true,
								message: '请输入手机号'
							}, {
								validator: phoneFormat,
								trigger: 'blur'
							}],
							expressCompanyId: [{
								required: true,
								message: '请选择快递公司',
								trigger: 'change'
							}],
							siteId: [{
								required: true,
								message: '请选择站点',
								trigger: 'change'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							storckId: '', //库存Id
							siteId: '', //站点Id
							expressCompanyId: '',
							waybillNumber: '', //数字5-30位
							pickCode: '', //数字1-6位
							clientMobile: '',
						},
						selectData: {
							siteId: [],
							expressCompanyId: [],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改包裹',
						form: {
							input: [{
									prop: 'waybillNumber',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickCode',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'clientMobile',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'expressCompanyId',
								placeholder: '请选择快递公司',
							}, {
								label: '站点',
								prop: 'siteId',
								placeholder: '请选择站点',
							}]
						},
						rules: {
							waybillNumber: [{
								required: true,
								message: '请输入运单号'
							}, {
								min: 5,
								max: 30,
								message: '长度在 5 到 30 位数字',
								trigger: 'blur'
							}],
							pickCode: [{
								required: true,
								message: '请输入取件码'
							}, {
								min: 1,
								max: 6,
								message: '长度在 1 到 6 位数字',
								trigger: 'blur'
							}],
							clientMobile: [{
								required: true,
								message: '请输入手机号'
							}, {
								validator: phoneFormat,
								trigger: 'blur'
							}],
							expressCompanyId: [{
								required: true,
								message: '请选择快递公司',
								trigger: 'change'
							}],
							siteId: [{
								required: true,
								message: '请选择站点',
								trigger: 'change'
							}]
						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [{
								name: 'waybillNumber',
								placeholder: '运单号',
								size: 'large'
							}, {
								name: 'pickCode',
								placeholder: '取件码',
								size: 'large'
							},
							{
								name: 'clientMobile',
								placeholder: '客户电话',
								size: 'large'
							}
						],
						search_select: [{
								name: 'siteId',
								placeholder: '站点',
								size: 'large',
								multiple: false,
								filterable: true,
							}, {
								name: 'expressCompanyId',
								placeholder: '快递公司',
								size: 'large',
								multiple: false,
								filterable: false,
							},
							{
								name: 'notifyStatus',
								placeholder: '通知状态',
								size: 'large',
								multiple: false,
								filterable: false,
							},
							{
								name: 'status',
								placeholder: '包裹状态',
								size: 'large',
								multiple: false,
								filterable: false,
							},
							{
								name: 'storeDay',
								placeholder: '在库时长',
								size: 'large',
								multiple: false,
								filterable: false,
							}
						],
						date: [{
							name: 'time',
//							type: 'daterange',
							type: 'datetimerange',
							separator: '-',
							size: 'small',
							placeholder: '-',
						}]
					},
					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						photo: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'pickCode',
								'clientMobile',
								'notifyStatusText',
								'storeDay',
							],
							items: [
								'取货码',
								'客户电话',
								'通知状态',
								'在库时长',
							],
							width: ['', '', '', '50']
						},
						operate: {
							detail: false,
							edit: true,
							makeReceive: true,
							sendMessage: true,
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},

				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							siteId: [],
							expressCompanyId: [],
							notifyStatus: [{
									name: '公众号通知',
									id: 1
								},
								{
									name: '发送成功',
									id: 2
								},
								{
									name: '发送中',
									id: 3
								},
								{
									name: '发送失败',
									id: 4
								},
								{
									name: '待发送',
									id: 5
								}
							],
							status: [{
								name: '全部',
								id: 0
							}, {
								name: '已入库',
								id: 1
							}, {
								name: '已签收',
								id: 2
							}, {
								name: '已退回',
								id: 3
							}, {
								name: '待入库',
								id: 4
							}],
							storeDay: [{
								name: '不到1天',
								id: 0
							}, {
								name: '1天',
								id: 1
							}, {
								name: '2天',
								id: 2
							}, {
								name: '3天',
								id: 3
							}, {
								name: '4天',
								id: 4
							}, {
								name: '5天',
								id: 5
							}, {
								name: '6天',
								id: 6
							}, {
								name: '7天',
								id: 7
							}],
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							waybillNumber: '', //运单号
							pickCode: '', // 取件码
							clientMobile: '', //客户电话
							siteId: '', //站点Id
							expressCompanyId: '', //快递公司
							notifyStatus: '', //通知状态
							status: '', //包裹状态
							storeDay: '', //在库时间
							startDate: '', //开始时间
							endDate: '', //结束时间
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			this.selectData();
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					this.$router.push({
						path: this.$route.path,
					})
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/base/storck/list?page=" + page + "&count=" + obj.limit + "&waybillNumber=" +
						obj.waybillNumber + "&pickCode=" + obj.pickCode + "&clientMobile=" + obj.clientMobile + "&siteId=" +
						obj.siteId + "&expressCompanyId=" + obj.expressCompanyId + "&notifyStatus=" + obj.notifyStatus +
						"&status=" + obj.status + "&storeDay=" + obj.storeDay + "&startDate=" + obj.startDate + "&endDate=" + obj.endDate)
					.then(res => {
						res.data.storcks.map(i => {
							//包裹状态
							switch(i.status) {
								case 0:
									i.statusText = '全部'
									break;
								case 1:
									i.statusText = '已入库'
									break;
								case 2:
									i.statusText = '已签收'
									break;
								case 3:
									i.statusText = '已退回'
									break;
								case 4:
									i.statusText = '待入库'
									break;
								default:
									break;
							}
							//通知状态
							switch(i.notifyStatus) {
								case 1:
									i.notifyStatusText = '公众号通知'
									break;
								case 2:
									i.notifyStatusText = '发送成功'
									break;
								case 3:
									i.notifyStatusText = '发送中'
									break;
								case 4:
									i.notifyStatusText = '发送失败'
									break;
								case 5:
									i.notifyStatusText = '待发送'
									break;
								default:
									break;
							}
							//在库时长
							if(i.storeDay != '-') {
								i.storeDay = i.storeDay + ' 天'
							}
						})
						this.data.received.table = res.data.storcks
						this.data.received.count = res.data.count
						_g.closeGlobalLoading();
					})
			},
			clickAddBtn() {
				this.Add.dialogFormVisible = true
			},
			commitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						that.apiPost("/api/backend/base/storck/in", this.Add.data.form).then(res => {
							if(res.code == 200) {
								that.$message({
									type: 'success',
									message: '录入成功！'
								});
								that.Add.dialogFormVisible = false
								_g.openGlobalLoading()
								that.tableData()
							}
						})
					}
				});
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//站点字典
				this.apiGet("/api/dict/site/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.siteId = res.data.sites
						that.Add.data.selectData.siteId = res.data.sites
						that.Edit.data.selectData.siteId = res.data.sites
					}
				})
				//快递公司
				this.apiGet("/api/dict/express-company/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.expressCompanyId = res.data.companies
						that.Add.data.selectData.expressCompanyId = res.data.companies
						that.Edit.data.selectData.expressCompanyId = res.data.companies
					}
				})
			},
			searchBtn() {
				this.tableData();
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL + "/api/backend/base/storck/export?siteId=" +
					obj.siteId + "&pickCode=" + obj.pickCode + "&expressCompanyId=" + obj.expressCompanyId + "&waybillNumber=" +
					obj.waybillNumber + "&clientMobile=" + obj.clientMobile + "&status=" + obj.status +
					"&startDate=" + obj.startDate + "&endDate=" + obj.endDate + "&notifyStatus=" + obj.notifyStatus + "&storeDay=" + obj.storeDay;
			},
			//搜索框时间选择
			timeChange() {
				if(this.data.exchanged.date.time) {
					this.data.exchanged.search.startDate = this.data.exchanged.date.time[0]
					this.data.exchanged.search.endDate = this.data.exchanged.date.time[1]
				} else {
					this.data.exchanged.search.startDate = ''
					this.data.exchanged.search.endDate = ''
				}
			},
			signIn(row) {
				let that = this;
				let pData = {
					storckId: row.storckId
				}
				this.apiPost("/api/backend/base/storck/out", pData).then(res => {
					if(res.code == 200) {
						if(res.data.waitOutCount > 0) {
							that.$confirm('该用户还有' + res.data.waitOutCount + '个待出库包裹', '', {
								confirmButtonText: '点击查看',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								that.$message({
									type: 'success',
									message: '去查看页面！'
								});
							}).catch(() => {
								that.$message({
									type: 'info',
									message: '已签收'
								});
								that.playAudio();
							});
						} else {
							this.$message({
								type: 'success',
								message: '已签收'
							});
							that.playAudio();
						}
						that.tableData();
					}
				})
			},
			sendMessage(row) {
				this.apiPost("/api/backend/base/storck/sms/notify", {
					storckId: row.storckId
				}).then(res => {
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: '短信发送成功！'
						});
						this.tableData();
					} else {
						this.$message({
							type: "warning",
							message: res.err
						})
					}
				})
			},
			returnPackage(row) {
				this.return_package_show = true;
				this.return_storckId = row.storckId;
			},
			commitReturn() {
				let that = this;
				this.apiPost("/api/backend/base/storck/back", {
					storckId: that.return_storckId,
					reason: that.return_form.reason
				}).then(res => {
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: '提交成功！'
						});
					}
				})
			},
			commitEdit(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let pData = {
							storckId: this.Edit.data.form.storckId,
							siteId: this.Edit.data.form.siteId,
							expressCompanyId: this.Edit.data.form.expressCompanyId,
							waybillNumber: this.Edit.data.form.waybillNumber, //数字5-30位
							pickCode: this.Edit.data.form.pickCode, //数字1-6位
							clientMobile: this.Edit.data.form.clientMobile,
						}
						this.apiPost("/api/backend/base/storck/modify", pData).then(res => {
							if(res.code == 200) {
								this.$message({
									type: 'success',
									message: '修改成功！'
								});
								this.Edit.dialogFormVisible = false;
								this.tableData();
							}
						})
					}
				});
			},
			modify(row) {
				this.Edit.data.form.storckId = row.storckId;
				this.Edit.data.form.siteId = row.siteId;
				this.Edit.data.form.expressCompanyId = row.expressCompanyId;
				this.Edit.data.form.waybillNumber = row.waybillNumber;
				this.Edit.data.form.pickCode = row.pickCode;
				this.Edit.data.form.clientMobile = row.clientMobile;
				this.Edit.dialogFormVisible = true;
			},
			playAudio() {
				this.$refs['autoAudio'].play()
			},
			toDetail(row) {
				let that = this;
				that.$router.push({
					name: '库存详情',
					query: {
						row: row
					}
				})
			},
		},
		mixins: [http]
	}
</script>